<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js"></script>
	</head>
	<body>
		<div id="app">
			姓名：{{student.name}}
			年龄：{{student.age}}
			身高：{{student.h}}
			体重：{{student.w}}
			<hr>
			<img width="200" src="img/t03.jpg" alt="图片">
			<br />
			<img width="200" v-bind:src="url"/>
			<br />
			<img :width="width" :src="url">
			<br />
			<button v-on:click='width+=10'>+10</button>
			<button @click="width-=10">-10</button>
			<hr />
			<button>放大10%</button>
			<button>缩小10%</button>
		</div>
		<script>
			const app=Vue.createApp({
				data(){
					return{
						student:{
							name:'张三',
							age:11,
							h:451,
							w:41
						},
						url:'img/t01.jpg',
						width:200
					}
				}
			}).mount('#app')
		</script>
	</body>
</html>